<template>
  <div class="app-container">
    <!-- 顶部导航控制栏 -->
    <div class="result-controls">
      <div class="left-controls">
        <el-button-group>
          <el-button 
            size="small"
            :disabled="currentIndex === 0" 
            @click="prevResult"
            icon="el-icon-arrow-left">
            上一个
          </el-button>
          <el-button 
            size="small"
            :disabled="currentIndex === results.length - 1" 
            @click="nextResult"
            icon="el-icon-arrow-right">
            下一个
          </el-button>
        </el-button-group>
        
        <span class="page-info">
          第 {{ currentIndex + 1 }} / {{ results.length }} 条
        </span>
      </div>
      
      <div class="right-controls">
        <!-- 新增胶囊状分段控制按钮 -->
        <div class="segmented-control">
          <button 
            class="control-option left-option"
            :class="{ 'active': filterStatus === 'all' }"
            @click="switchFilter('all')">
            全部
          </button>
          <button 
            class="control-option right-option"
            :class="{ 'active': filterStatus === 'pending' }"
            @click="switchFilter('pending')">
            未审核
          </button>
        </div>
        
        <el-button 
          size="small"
          icon="el-icon-refresh"
          @click="refreshData">
          刷新
        </el-button>
      </div>
    </div>

    <!-- 结果展示区域 -->
    <div v-loading="loading" class="result-display-container">
      <FormResultDisplay 
        v-if="currentResult" 
        :key="`${currentResult.resultId}-${refreshKey}`"
        :formFields="fields" 
        :formData="currentResult.data" 
        :status="currentResult.status"
        :createTime="currentResult.createTime"
        :formId="form_id"
        @status-change="handleStatusChange" />
      
      <el-empty v-else description="暂无表单数据" />
    </div>
  </div>
</template>

<script>
import FormResultDisplay from '@/components/cd/form/FormResultDisplay.vue';
import { getFormResult, updateResultStatus } from '@/api/cd/form'

export default {
  components: { FormResultDisplay },
  props: {
    form_id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      fields: [],
      results: [],
      currentIndex: 0,
      loading: false,
      filterStatus: 'all', // 'all' 或 'pending'
      refreshKey: 0 // 用于强制刷新子组件
    }
  },
  computed: {
    currentResult() {
      return this.results[this.currentIndex] || null
    },
    
    filteredResults() {
      if (this.filterStatus === 'pending') {
        return this.results.filter(item => item.status === 0)
      }
      return this.results
    }
  },
  watch: {
    filteredResults(newVal) {
      // 过滤后重置当前索引
      if (newVal.length > 0 && !newVal.includes(this.currentResult)) {
        this.currentIndex = 0
      }
    }
  },
  created() {
    this.loadFormData()
  },
  methods: {
    async loadFormData() {
      this.loading = true
      try {
        const params = {
          formId: this.form_id,
          status: this.filterStatus === 'pending' ? 0 : undefined
        }
        
        const res = await getFormResult(params.formId,params.status)
        this.results = res.data || []
        
        if (this.results.length > 0) {
          // 尝试解析字段配置
          try {
            this.fields = JSON.parse(this.results.formFields) || []
          } catch (e) {
            console.error('解析表单字段失败:', e)
            this.fields = []
          }
        }
      } catch (error) {
        console.error('加载表单数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    
    prevResult() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    
    nextResult() {
      if (this.currentIndex < this.filteredResults.length - 1) {
        this.currentIndex++
      }
    },
    
    switchFilter(status) {
      if (this.filterStatus !== status) {
        this.filterStatus = status
        this.currentIndex = 0 // 切换时重置到第一条
        this.loadFormData()
      }
    },
    
    async handleStatusChange(newStatus) {
      try {
        await updateResultStatus(
          this.currentResult.resultId, 
          newStatus
        )
        
        // 更新当前结果状态
        this.currentResult.status = newStatus
        
        // 如果当前是仅显示未审核状态，且状态变为非未审核，则从列表中移除
        if (this.filterStatus === 'pending' && newStatus !== 0) {
          this.results = this.results.filter(
            item => item.resultId !== this.currentResult.resultId
          )
        }
        
        this.$message.success('状态更新成功')
      } catch (error) {
        console.error('更新状态失败:', error)
        this.$message.error('状态更新失败')
      }
    },
    
    refreshData() {
      this.refreshKey++
      this.loadFormData()
    }
  }
}
</script>

<style scoped>
/* 新增分段控制样式 */
.segmented-control {
  display: inline-flex;
  border-radius: 20px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  overflow: hidden;
  margin-right: 10px;
}

.control-option {
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  transition: all 0.3s;
  outline: none;
}

.left-option {
  border-radius: 20px 0 0 20px;
  border-right: 1px solid #dcdfe6;
}

.right-option {
  border-radius: 0 20px 20px 0;
}

.control-option.active {
  background: #409eff;
  color: white;
  font-weight: 500;
}
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.result-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.right-controls {
  display: flex;
  gap: 8px;
}

.page-info {
  font-size: 14px;
  color: #606266;
}

.result-display-container {
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .result-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .left-controls, .right-controls {
    justify-content: center;
  }
}
</style>